<template>
	<view>
	<!-- 
		<view class="guding">
			<view class="ssk">
				<view class="search">
					<input class="search-shuru" placeholder="请输入游戏名称内的商品" placeholder-class="pla" />
				</view>
				<view>
					<button class="search-ss">
						搜索
					</button>
				</view>
			</view>
			<view class="xuanzeqi">
				<view class="yxqf" @click="yxqf">游戏区服 ▼</view>
				<view class="yxqf" @click="zhpx">综合排序 ▼</view>
				<view class="yxqf" @click="sx">筛选 ▼</view>
				<view class="twcw">
					<view class="tw" @click="tw">图文</view>
					<view class="cw" @click="cw">纯文</view>
				</view>
			</view>
			
				<view class="xuanqu" :class="{displaynone:xuanqu }">
					<view class="yxqu" @click="yxqu">
						游戏区
					</view>
				</view>
			
			<view class="paixu" :class="{displaynone: paixu}">
				<view class="yxqu">
					3131513515
				</view>
			</view>
			<view class="xzq">
				<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
					:range="multiArray">
					<view style="background-color:  #f4f4f4">
						{{ multiArray[0][multiIndex[0]] }}，
						{{ multiArray[1][multiIndex[1]] }}，
						{{ multiArray[2][multiIndex[2]] }}
					</view>
				</picker>
			</view>
			
		</view> -->
	<saixuan></saixuan>
	<scroll-view class="chat" scroll-y="true" scroll-with-animation="true" :scroll-into-view="scrollToview">
	<view class="third">
		<view class="third-sp">
			<navigator class="third-sp_sp" url="/pages/yxhm/yxhm">
				<!-- <view class="third-sp_sp"> -->
					<view class="tutu">
						<image class="third-sp_sp_tu" src="../../static/9.png"></image>
					</view>
					<view class="zcx">
						<view class="djzh">顶级账号</view>
						<!-- <view class="third-sp_sp_zi"> -->
						<text class="third-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
						<!-- </view> -->
					</view>
					<view class="nans">英雄联盟-电信-艾欧尼亚</view>
					<view class="xiba">
						<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
						<text class="sixth-tj_zh_mn">￥ 999999</text>
					</view>
					<view class="sjsj">上架时间：2022-01-03 18:50:09</view>
				<!-- </view> -->
			</navigator>
		</view>
	
		<view class="third-sp">
			<view class="third-sp_sp">
				<view class="tutu">
					<image class="third-sp_sp_tu" src="../../static/9.png"></image>
				</view>
				<view class="zcx">
					<view class="djzh"><text>顶级账号</text></view>
					<!-- <view class="third-sp_sp_zi"> -->
					<text class="third-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
					<!-- </view> -->
				</view>
				<view class="nans">英雄联盟-电信-艾欧尼亚</view>
				<view class="xiba">
					<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
					<text class="sixth-tj_zh_mn">￥ 999999</text>
				</view>
				<view class="sjsj">上架时间：2022-01-03 18:50:09</view>
			</view>
		</view>
		<view class="third-sp">
			<view class="third-sp_sp">
				<view class="tutu">
					<image class="third-sp_sp_tu" src="../../static/9.png"></image>
				</view>
				<view class="zcx">
					<view class="djzh"><text>顶级账号</text></view>
					<!-- <view class="third-sp_sp_zi"> -->
					<text class="third-sp-">测试测试测试测试测试测试测试测试测试测试测试测试测试</text>
					<!-- </view> -->
				</view>
				<view class="nans">英雄联盟-电信-艾欧尼亚</view>
				<view class="xiba">
					<image class="rz" src="../../static/xiba.png" mode="aspectFill"></image>
					<text class="sixth-tj_zh_mn">￥ 999999</text>
				</view>
				<view class="sjsj">上架时间：2022-01-03 18:50:09</view>
			</view>
		</view>
		<!-- </view> -->
	</view>
	</scroll-view>
	</view>
</template>

<script>
	import saixuan from '../../components/saixuan/saixuan.vue'
	export default {
		components: {
			saixuan,
		},
		data() {
			return {
				scrollToview: '',
				// yxququ:true,
				// xuanqu:true,
				// paixu:true,
				// multiArray: [
				// 	['大区'],
				// 	['电信', '网通', '峡谷之巅'],
				// 	['黑色玫瑰', '艾欧尼亚', '裁决之地']
				// ],
				// multiIndex: [0, 0, 0]
			}


		},

		methods: {

			// getElementHeight: function() {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('.guding').boundingClientRect(data => {
			// 	}).exec();
			// },
			// yxqu:function(){
			// 	this.yxququ = !this.yxququ;
			// 	this.getElementHeight();
			// },
			// zhpx: function() {
			// 	this.paixu = !this.paixu;
			// 	// setTimeout(() => {
			// 		this.getElementHeight();
			// 	// }, 0)
			
			// },
			// yxqf: function() {
			// 	this.xuanqu = !this.xuanqu;
			// 	// setTimeout(() => {
			// 		this.getElementHeight();
			// 	// }, 0)
			
			// },
			
			// bindMultiPickerColumnChange: function(e) {
			// 	this.multiIndex[e.detail.column] = e.detail.value;
			// 	switch (e.detail.column) {
			// 		case 0: //拖动第1列
			// 			switch (this.multiIndex[0]) {
			// 				case 0:
			// 					this.multiArray[1] = ['电信', '网通', '峡谷之巅'];
			// 					this.multiArray[2] = ['黑色玫瑰', '艾欧尼亚', '裁决之地'];
			// 					break;
			// 			}
			// 			this.multiIndex.splice(1, 1, 0);
			// 			this.multiIndex.splice(2, 1, 0);
			// 			break;
			// 		case 1: //拖动第2列
			// 			switch (
			// 				this.multiIndex[0] //判断第一列是什么
			// 			) {
			// 				case 0:
			// 					switch (this.multiIndex[1]) {
			// 						case 0:
			// 							this.multiArray[2] = ['黑色玫瑰', '艾欧尼亚', '裁决之地'];
			// 							break;
			// 						case 1:
			// 							this.multiArray[2] = ['德玛西亚', '诺克萨斯'];
			// 							break;
			// 						case 2:
			// 							this.multiArray[2] = ['峡谷之巅'];
			// 							break;

			// 					}
			// 					break;

			// 			};
			// 			this.multiIndex.splice(2, 1, 0);
			// 			break;
			// 	}
			// 	this.$forceUpdate();
			// }
		}
	}
</script>

<style lang="scss">
	.chat{
		
		height: 100%;
	}
	// .search-ss {
	// 	width: 100rpx;
	// 	height: 60rpx;
	// 	border-radius: 30rpx;
	// 	justify-content: center;
	// 	font-size: 20rpx;
	// 	margin-left: 20rpx;
	// 	background-color: black;
	// 	color: white;
	// 	display: flex;
	// 	align-items: center;
	// 	white-space: nowrap;
	
	// }
	// .guding{
	// 	width: 100%;
	// 	padding-top: var(--status-bar-height);
	// 	// position: absolute;
	// 	background-color: #ffffff;
	// 	z-index: 1000;
	// 	// border-top: 1px solid #838383;
	// 	.ssk {
	// 		background-color: #ffffff;
			
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		width: 100%;
	// 		height: 100rpx;
	// 		.search {
	// 			display: flex;
	// 			align-items: center;
	// 			border-radius: 40rpx;
	// 			border: 3rpx solid black;
	// 			height: 50rpx;
	// 			width: 50%;
	// 			.search-shuru {
					
	// 				width: 600rpx;
	// 				padding-left: 10rpx;
	// 				height: 100%;
				
	// 			}
	// 		}
			
	// 	}
		
	// }
	// .displaynone{
	// 	display: none;
	// }
	// .xuanqu{
	// 	width: 100%;
	// 	height: 600rpx;
		

	// 	// padding-bottom: var(--status-bar-height);
	// 	// position: fixed;
	// 	// background-color: #ffffff;
	// 	// z-index: 1000;
	// 	.yxqu-{
			
	// 	}
	// 	.yxqu{
	// 		font-size: 25rpx;
	// 		float:left;
	// 	}
	// 	.yxqu-dw{
			
	// 		display: flex;
	// 		justify-content: space-around;
	// 		flex-direction: column;
	// 	}
		
	// }
	// .xuanzeqi{
	// 	height: 60rpx;
	// 	background-color: #ffffff;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;
	// 	border-top: 2rpx solid #838383;
	// 	border-bottom: 2rpx solid #838383;
	// 	.twcw{
	// 		width: 120rpx;
	// 		display: flex;
	// 		justify-content: space-around;
	// 		align-items: center;
	// 		color: #878787;
	// 		.tw{
	// 			font-size: 25rpx;
				
	// 		}
	// 		.cw{
	// 			font-size: 25rpx;
	// 		}
	// 	}
	// 	.yxqf{
	// 		font-size: 25rpx;
	// 		color: #878787;
	// 	}
	// }
	
	
	page {
		background-color: #f4f4f4;
	}
	.pla{
		font-size: 15rpx;
	}

	.sjsj {
		color: #c2c2c2;
		font-size: 20rpx;
		margin-top: 10rpx;
		
	}

	.rz {
		width: 300rpx;
		height: 40rpx;
		margin-top: 10rpx;

	}

	.nans {
		color: #c2c2c2;
		font-size: 20rpx;
		clear: both;
		margin-top: 15rpx;
	}

	.xiba {
		clear: both;
		display: flex;
		justify-content: space-between;
	}

	.zcx {
		/* float: left; */
		margin-top: 20rpx;

	}

	.third-sp- {
		font-size: 25rpx;
	}

	.djzh {
		width: 100rpx;
		height: 40rpx;
		line-height:40rpx;
		text-align: center;
		background-color: red;
		color: white;
		border-radius: 10rpx;
		float: left;
		white-space: nowrap;
		font-size: 20rpx;
	}
	
	

	.sixth-tj_zh_mn {
		display: flex;
		justify-content: flex-end;
		color: red;
		font-size: 35rpx;
	}

	.third-sp_sp_zi {
		margin-top: 20rpx;
		display: flex;
	}
	
	.third-sp_sp{
		height: 96%;
		width: 100%;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.third {
		align-items: center;
		
		width: 100%;
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
		
	
	}

	.third-sp {
		background-color: #ffffff;
		width: 96%;
		height: 600rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.tutu {
		display: flex;
		justify-content: center;
		height: 300rpx;
	}

	.third-sp_sp_tu {
		width: 90%;
		height: 100%;
	}




	.xzq {
		
		background-color: #ffffff;
	}

	
	

	

	
</style>
